<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Demo</title>
        <link rel="stylesheet" href="css/idangerous.swiper.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="tabs">
            <a href="#" id="section1" class="section active">Section 1</a>
            <a href="#" id="section2" class="section">Section 2</a> 
            <a href="#" id="section3" class="section">Section 3</a> 
            <a href="#" id="section4" class="section">Section 4</a> 
        </div>
        <!-- /tabs -->
        <div class="device">
            <a class="arrow-left" href="#"></a> 
            <a class="arrow-right" href="#"></a>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div id="1" class="swiper-slide">
                        <img src="img/1.gif"> 
                    </div>
                    <div id="2" class="swiper-slide">
                        <img src="img/2.gif"> 
                    </div>
                    <div id="3" class="swiper-slide">
                        <img src="img/3.gif"> 
                    </div>
                    <div id="4" class="swiper-slide">
                        <img src="img/4.gif"> 
                    </div>
                    <div id="5" class="swiper-slide">
                        <img src="img/5.gif"> 
                    </div>
                    <div id="6" class="swiper-slide">
                        <img src="img/6.gif"> 
                    </div>
                    <div id="7" class="swiper-slide">
                        <img src="img/7.gif"> 
                    </div>
                    <div id="8" class="swiper-slide">
                        <img src="img/8.gif"> 
                    </div>
                    <div id="9" class="swiper-slide">
                        <img src="img/9.gif"> 
                    </div>
                    <div id="10" class="swiper-slide">
                        <img src="img/10.gif"> 
                    </div>
                    <div id="11" class="swiper-slide">
                        <img src="img/11.gif"> 
                    </div>
                    <div id="12" class="swiper-slide">
                        <img src="img/12.gif"> 
                    </div>
                    <div id="13" class="swiper-slide">
                        <img src="img/13.gif"> 
                    </div>
                    <div id="14" class="swiper-slide">
                        <img src="img/14.gif"> 
                    </div>
                    <div id="15" class="swiper-slide">
                        <img src="img/15.gif"> 
                    </div>
                    <div id="16" class="swiper-slide">
                        <img src="img/16.gif">
                    </div>
                </div>
                <!-- swipe wrapper -->
            </div>
            <!-- swipe container -->
            <div class="indicator">
            </div>
        </div>
        <!-- /device -->
        <div class="explain">
            <div class="title">
                <h1>Section 1, Thing 1 Header</h1>
            </div>
            <div class="content">
                <span class="header">Section 1 Thing 1 content</span>
                Content below the control relates to the current subsection, so if the user clicked the right arrow, Thing 1 would slide off the control, Thing 2 would now be current, and page content would change to reflect that contained in Thing 2 of Section 1.
            </div>
        </div>
        <script src="js/jquery-1.10.1.min.js"></script>
        <script src="js/idangerous.swiper-2.1.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>